<template>
	<sl-page title="优惠券">
		<view class="coupon-tab">
			<CouponHead :couponState="couponState" @onChangeTab:result="handleCouponTabResult"></CouponHead>
		</view>
		<view class="page-coupon">
			<view class="flex flex-column" v-if="bossList.length">
				<view class="coupon-scope">
					平台神券
				</view>
				<block v-if="couponState == initCouponState">
					<CouponReceive  :listDatas="bossList" @receiveCoupon:result="receiveCoupon"></CouponReceive>
				</block>
				<block v-else>
					<CouponUse  :listDatas="bossList"></CouponUse>
				</block>
			</view>
			<view class="flex flex-column" v-if="tenantList.length">
				<view class="coupon-scope">
					商家好券
				</view>
				<block v-if="couponState == initCouponState">
					<CouponReceive  :listDatas="tenantList" @receiveCoupon:result="receiveCoupon"></CouponReceive>
				</block>
				<block v-else>
					<CouponUse  :listDatas="tenantList"></CouponUse>
				</block>
			</view>
		</view>
	</sl-page>
</template>

<script>
	import CouponApi from '@/api/coupon/coupon.js';
	import Constants from '@/constants';
	import CouponHead from '@/pages/components/coupon/head/head.vue';
	import CouponUse from '@/pages/components/coupon/couponUse.vue';
	import CouponReceive from '@/pages/components/coupon/couponReceive.vue';

	const couponStates = {
		'领券中心': CouponApi.usables,
		'未使用': CouponApi.unuses,
		'已使用': CouponApi.useds,
		'已过期': CouponApi.expires,
	};

	export default {
		//
		mixins: [Constants],
		//
		components: {
			CouponHead,
			CouponUse,
			CouponReceive
		},
		//
		data() {
			return {
				options: {},
				query: {},
				//订单状态
				couponState: '领券中心',
				initCouponState: '领券中心',
				//
				couponList: [],
				bossList: [],
				tenantList: []
			};
		},
		//
		onLoad({
			couponState
		}) {
			if (couponState) {
				this.couponState = couponState;
			}
			this.initCouponTabResult(this.couponState);
		},
		//
		onShow() {

		},
		//
		methods: {
			//
			loadCoupons: async function(apiEndpoint = CouponApi.usables) {
				try {
					const res = await apiEndpoint(this.query, this.param);
					//领券中心和非领券中心字段不一样
					this.bossList = res.obj.data.filter(obj => obj.scope == '1' || obj.couponScope == '1');
					this.tenantList = res.obj.data.filter(obj => obj.scope == '2' || obj.couponScope == '2');
				} catch (error) {
					console.error('【获取优惠券失败】:', error);
				}
			},
			//
			initCouponTabResult(couponState) {
				this.handleCouponTabResult(couponState)
			},
			//
			handleCouponTabResult(couponState) {
				this.couponState = couponState;
				const apiEndpoint = couponStates[couponState];
				if (apiEndpoint) {
					this.loadCoupons(apiEndpoint);
				} else {
					console.error('【无效的优惠券分类】:', couponState);
				}
			},
			//领取优惠券
			receiveCoupon(result) {
				console.log('result: ',result);
				if (result.code == '1') {
					this.$app.toast(result.obj.couponName + '领取成功');
				}else{
					this.$app.toast(result.msg);
				}  
				// switch (result.code) {
				//   case '-1':
				//     this.$app.toast(result.msg);
				//     break;
				//   case '1':
				//     this.$app.toast(`${result.obj.couponName}领取成功`);
				//     break;
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.coupon-tab {
		background-color: $uni-bg-color;
	}

	.page-coupon {
		margin: 0rpx 16rpx;
		font-size: $uni-font-size-base;

		.coupon-scope {
			color: #000;
			font-size: 26rpx;
			font-weight: 700;
			line-height: 140%;
			margin: 16rpx 8rpx;
		}
	}
</style>